// const backgroundColor = 'transparent';
// const color = ['#32C880', '#359DFD', '#75F', '#FFA800', 'red'];
// const title = {
//   show: false,
//   text: 'title',
//   textStyle: {
//     fontSize: 28,
//     color: '#ffffff',
//     fontFamily: 'PingFangSC-Medium, PingFang SC',
//     fontWeight: 500,
//     textShadowColor: '#4bb2ff',
//     textShadowBlur: 12,
//     textShadowOffsetX: 0,
//     textShadowOffsetY: 0,
//   },
//   padding: 0,
//   top: 20,
//   left: 25,
// };
// const legend = {
//   orient: 'vertical',
//   right: 10,
//   top: 'center',
//   icon: 'circle', //图例形状
//   padding: 0,
//   top: 30,
//   right: 40,
//   itemWidth: 10, //小圆点宽度
//   itemHeight: 14, //item间距
//   itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
//   textStyle: {
//     fontSize: 14,
//     // color: '#ffffff',
//   },
// };
// const tooltip = {
//   trigger: 'item',
//   axisPointer: {
//     type: 'shadow',
//   },
// };
const genBarOption = (data) => {
  console.log('data', data)
  const xData = []
  const yData = []
  data.forEach(item => {
    xData.push(item.name)
    yData.push(item.value)
  })
  // 饼图配置
  const option = {
    // backgroundColor,
    // color,
    // title,
    // tooltip,
    // legend,
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: false,
          color: 'red'
        },
        shadowStyle: {
          color: 'rgba(150,150,150,0.3)'
        }
      },
      // formatter: '{b0}: {c0}<br />{b1}: {c1}'
      // backgroundColor:'red'
    },
    xAxis: {
      data: xData,
      axisLabel: {
        rotate: 30
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: yData,
      label: {
        show: true,
        align: "center",
        position: "top"
      },
      selectedMode: true,
      select: {
        itemStyle: {
          color: '#32C880',
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 10,
          shadowOffsetY: 10,
          shadowOffsetX: 10
        }
      }
    }],
    dataZoom: [
      {
        show: false,
        type: 'slider',    // 使用滑动条型 dataZoom 组件
        startValue: 0,
        endValue: 9
      },

    ],

  };


  return option


}

class EchartBarAnimation {
  constructor(myChart) {
    this.myChart = myChart;
    this.timer = null
    this.endIndex = 0
    this._endIndex = 0 //记录最开始的值
    this.itemLength = 0
    // this.init()

  }

  dataZoom() {

    // console.log('this.myChart.getOption()', this.myChart.getOption().dataZoom[0].endValue)
    this.itemLength = this.myChart.getOption().series[0].data.length
    this.endIndex = this.myChart.getOption().dataZoom[0].endValue
    this._endIndex = this.endIndex
    this.timer = setInterval(() => {
      console.log('this.endIndex', this.endIndex)
      if (this.endIndex >= this.itemLength) {
        this.endIndex = this._endIndex
      }
      this.endIndex = this.endIndex + 1
      this.myChart.dispatchAction({
        type: 'dataZoom',
        startValue: 0,
        endValue: this.endIndex
      });
      this.myChart.dispatchAction({
        type: 'select',
        seriesIndex: 0,
        dataIndex: this.endIndex
      })
    }, 5000)

    window.onbeforeunload = () => {
      clearInterval(this.timer);
      this.timer = null
      this.endIndex = 0
      this._endIndex = 0 //记录最开始的值
      this.itemLength = 0
      this.myChart = null
    }

  }


  highlight(next) {
    if (typeof next !== 'function') throw new Error('必须传入next函数')
    const itemLength = this.myChart.getOption().series[0].data.length
    this.timer = setInterval(() => {
      console.log('this.currentIndex', this.currentIndex)
      if (this.currentIndex === itemLength) {
        //轮播完一轮
        this.abortHighlight()
        next()// 通知调用函数准备下一次轮播

      } else {
        //当前正常轮播
        this.clearHighlight()
        // 高亮当前图形
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.currentIndex
        });
        // 显示提示框
        this.myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: this.currentIndex
        });
        this.currentIndex = this.currentIndex + 1


      }
    }, 5000)

    window.onbeforeunload = () => {
      clearInterval(this.timer);
      this.timer = null
      this.myChart = null
    }
  }
  clearHighlight() {
    // 取消所有高亮
    this.myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    });
    //取消tooltip高亮
    this.myChart.dispatchAction({
      type: 'hideTip',
    });

  }
  abortHighlight() {
    this.clearHighlight()
    clearInterval(this.timer)
    this.timer = null //重置
    this.currentIndex = 0 //重置
  }
}
